<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <demo></demo>
        <async-comp></async-comp>
    </div>

    <script src="./vue.js"></script>
    <script>
        Vue.component("demo", {
            template: `<h1>这是一个同步的组件</h1>`
        })

        // 第二个参数是 promise 的参数
        Vue.component("async-comp", function (resolve, reject) {
            setInterval(function () {
                // 成功的结果
                resolve({
                    template: `<h1>这是一个异步的组件</h1>`
                })
            }, 3000)
        })

        let vm = new Vue({
            el: "#app"
        })
    </script>
</body>
<!-- 
    一、为什么要使用路由懒加载
    　　为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。

    二、定义

    　　懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。

    三、使用

    　　常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import

 -->
</html>